<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//第二个练习
			//需求: 为所有的 li 节点添加 onclick 响应函数
			//实现 city 子节点和 game 子节点对应位置的元素的互换
			//例如:点击city中的第一个li北京，则与game中的第一个红警互换；再次点击，则北京与红警再次互换；
			//同理，点击city中的第二个li，则与game中的第二个li互换，再次点击，这两个li再次互换
      window.onload=function(){
      	     var getbj=document.getElementById("city");
           var getgm=document.getElementById("game");
          var get2=getbj.children;
           var get3=getgm.children;
        
          for (var i=0;i<get2.length;i++) {
          	
         /*   get2[i].onclick=function(){
            var cloneNode=this.cloneNode(true);
			cloneNode.onclick=this.onclick;
            var b=index(cityNode,this);
          	var str=this.innerHTML;
          	  this.innerHTML=strr
          	  var strr=get3[b].innerHTML;
          	  get3[b].innerHTML=str;
          	  
          }*/
         /*添加onclick事件*/
         !function(j){
         	get2[j].onclick=function(){
         		console.log(j);
         	}
         }(i);
          !function(k){
         	get3[k].onclick=function(){
         		console.log(k);
         	}
         }(i);
         
          	
          }
      }
      
       
       
       
       /*互换*/
         /*  function c(){    
           var getbj=document.getElementById("bj");
           var getgm=document.getElementById("gm");
           var clonebj=getbj.cloneNode(true);
           var clonegm=getgm.cloneNode(true);
           var parentbj=getbj.parentNode;
           var parentgm=getgm.parentNode;
           parentbj.replaceChild(getgm,clonebj);    
           parentgm.replaceChild(clonegm,getbj);   
            
           
           }
           
           }
           c("gm","bj");
          
         */
       
		</script>
	</head>
	<body>   
			 <p>你喜欢那个城市</p>
		<ul id="city">
			<li id="bj" name="beijing">北京</li>
			<li id="sh">上海</li>
			<li id="sz">苏州</li>
			<li>泉州</li>
		</ul>
		
		<br><br>
		<p>你喜欢那个游戏</p>
		<ul id="game">
			<li id="gm" >红警</li>
			<li>魔兽</li>
			<li>侠盗猎车</li>
			<li>罪恶都市</li>
		</ul>
		<button id="" onclick="c();"></button>
	</body>
</html>
